import { defineComponent } from 'vue';
import { getProject } from "@/api/home"
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import "./index.less";
import { ElDatePicker } from 'element-plus';
import ItemTable from './ItemTable';


export default defineComponent({
    name: 'MyItem',
    setup() {

        const params = ref({ is_company: 0, date: '' }) as AnyObject;
        const itemTableRef = ref();
        const echartsRef = ref();
        const route = useRoute();
        const router = useRouter();
        const data = ref({}) as AnyObject;
        const detailSlots = ref({
            detail: () => {
                return <div class="item_right">
                    <ElDatePicker
                        v-model={params.value.date}
                        type="month"
                        class="month_selector"
                        range-separator="/"
                        clearable
                        placeholder='请选择'
                        // @ts-ignore
                        onChange={handleSelect}
                    />
                </div>

            }
        })
        const option = ref({
            tooltip: {
                trigger: 'item'
            },
            color: ["#4a74ea", "#eb7b3b", "#3bc27f", "#ffc824"],
            title: [
                {
                    subtext: "进行中项目",
                    top: '42%',
                    left: '11.5%',
                    itemGap: 5,
                    textAlign: 'center',
                    triggerEvent: true
                },
                {
                    subtext: '已完成项目',
                    top: "42%",
                    left: '59.4%',
                    itemGap: 5,
                    textAlign: 'center',
                    triggerEvent: true
                },

            ],
            legend: {
                icon: "circle",
                itemGap: 20,
                left: 15,
                itemWidth:10
            },
            label: {
                formatter: "{name|{c}}({d}%)\n{b}",
                textAlign: "left",
                rich: {
                    name: {
                        fontSize: 16,
                        fontWeight: "bold",
                        padding: [5, 0]
                    }
                }
            },
            media: [
                {
                    option: {
                        series: [
                            { label: { show: false }, type: 'pie', name: "进行中项目", center: ['12%', '50%'], radius: ['35%', '50%'] },
                            { label: { show: false }, type: 'pie', name: "已完成项目", center: ['60%', '50%'], radius: ['35%', '50%'] },
                        ]
                    }
                },

            ]
        }) as AnyObject;
        const handleSelect = (val: string) => {
            const realMonth = ("" + (params.value.date.getMonth() + 1)).padStart(2, "0");
            const year = params.value.date.getFullYear();
            handleItem({ month: year + "-" + realMonth })
        }
        const viewDetail = (type?:number) => {
            params.value.type = type;
            itemTableRef.value.dialogVisible = true;
            console.log("chakan",params.value);

        }
        handleItem();
        function handleItem(params = {}) {
            getProject(params).then(res => {
                data.value = res.data;
                option.value.media[0].option.series[0].data = [{ name: "正常项目", value: res.data.normal }, { name: "延期项目", value: res.data.delay }];
                option.value.title[0].text = res.data.ongoing;
                option.value.media[0].option.series[1].data = [{ name: "规范按时完成", value: res.data.on_time }, { name: "超时完成", value: res.data.timeout }];
                option.value.title[1].text = res.data.finish;

                echartsRef.value?.chartInstance.on('click', (e: AnyObject) => {
                    console.log(e, e.componentType);
                    if (e.componentType === 'title') {
                      const _type = [6, 7];
                      viewDetail(_type[e.componentIndex]);
                    }
                  });
            })
        }
        return () => (

            <SheltV2 title='我的项目' more="查看详情" onViewDetail={viewDetail} v-slots={detailSlots.value} question="<div><p>【该数据每日02:00更新一次】</p><p>我的项目数据来源于BI，展示与本人有关的项目数据。</p></div>">
                <Echarts ref={echartsRef} aspectRatio="3/1" option={option.value} />
                <div class="item_wrap normal">
                    <div class="item hover-color" onClick={()=>viewDetail(2)}>
                        <div class="title">正常项目</div>
                        <div class="num">{data.value.normal}</div>
                    </div>
                    <div class="item">
                        <div class="title">正常项目占比</div>
                        <div class="num">{data.value.normal_rate}</div>
                    </div>
                    <div class="item hover-color" onClick={()=>viewDetail(1)}>
                        <div class="title">延期项目</div>
                        <div class="num red">{data.value.delay}</div>
                    </div>
                    <div class="item hover-color" onClick={()=>viewDetail(3)}>
                        <div class="title">延期预警</div>
                        <div class="num red">{data.value.warning}</div>
                    </div>
                </div>
                <div class="item_wrap finish">
                    <div class="item hover-color" onClick={()=>viewDetail(4)}>
                        <div class="title">规范按时完成</div>
                        <div class="num">{data.value.on_time}</div>
                    </div>
                    <div class="item">
                        <div class="title">规范按时率</div>
                        <div class="num">{data.value.on_time_rate}</div>
                    </div>
                    <div class="item hover-color" onClick={()=>viewDetail(5)}>
                        <div class="title">超时完成</div>
                        <div class="num">{data.value.timeout}</div>
                    </div>
                </div>
                <ItemTable ref={itemTableRef} params={params.value} />
            </SheltV2>
        );
    }
});
